$$props and $$restProps

Posted on 2023-04-24 by

henrikvilhelmberglund

This time we're finding out about $$props and $$restProps.

We're making a button component as if we're making a component library. 

<script>
	import Button from "./Button.svelte";
</script>

<Button type="primary">Primary button</Button>

<Button type="secondary">Secondary button</Button>

<style>
</style>

Now a user tells us that they want a new feature, to be able to customize the style of the button. We say okay and start implementing this: 

<script>
	import Button2 from "./Button2.svelte";
</script>

<Button2 type="primary" style="font-size: 24px;">Primary button</Button2>

<Button2 type="secondary">Secondary button</Button2>

<style>
</style>

Phew! Oh wait, now they want a new feature, to add an aria-label. 

<script>
	import Button3 from "./Button3.svelte";
</script>

<Button3 type="primary" style="font-size: 24px;" ariaLabel="close">X</Button3>

<Button3 type="secondary">Secondary button</Button3>

<style>
</style>

Okay this isn't great, every time we're asked for a new feature we have to edit our component to support it. Is there a better way?

This is why we have $$props and $$restProps .

"$$props" gives an object with all of the props passed to the component.

"$$restProps" gives an object with the props that were not declared with export .

We added a Joke component that can get jokes from an API, in the fetch we're using the results of our $$restProps.
undefined undefined 
<script>
	import Button4 from "./Button4.svelte";
	import Joke from "./Joke.svelte";

	let type = "primary";
	// $$props is reactive so you could do something like this
	// 	setTimeout(() => {
	// 		type="secondary"
	// 	}, 1000)
</script>

<!-- we want to customize through the props -->
<Joke
	type="twopart"
	category="Programming"
	lang="en"
	blacklistFlags="nsfw,racist,sexist,explicit" />

<Joke type="single" category="Dark" lang="en" blacklistFlags="nsfw,racist,sexist,explicit" />

<Button4 {type} style="font-size: 24px;" aria-label="close" class="a b c" foo="bar">X</Button4>

<Button4 type="secondary">Secondary button</Button4>

<style>
	:global(.a) {
		font-style: italic;
	}
</style>

The benefit of $$props and $$restProps is that we don't have to define everything , we can simply pass all of the props along and work with them that way.

According to the documentation this ends up with less optimized code though and so it is not recommended and shouldn't be used unless it's necessary.